<style scoped xmlns="http://www.w3.org/1999/html">
.el-header {
    height: 60px;
    background-color: #545c64;
    position: relative;
}

ul {
    list-style: none;
}

ul li {
    float: left;
    font-size: 15px;
}

.el-main {
    margin: 0 auto;
    width: 1500px;
}

</style>
<template xmlns:el-col="http://www.w3.org/1999/html">
    <div class="common-layout">
        <el-container>
            <el-header></el-header>
            <el-main>
                <el-row>
                    <el-col :span="1"></el-col>
                    <el-col :span="3">
                        <h5 class="mb-2" style="margin-left: 60px">全部功能</h5>
                        <el-menu
                                default-active="1"
                                class="el-menu-vertical-demo"
                                router
                        >
                            <el-menu-item index="/">
                                <el-icon>
                                    <icon-menu/>
                                </el-icon>
                                <span>返回首页</span>
                            </el-menu-item>
                            <el-menu-item index="/person/personalMessage">
                                <el-icon>
                                    <icon-menu/>
                                </el-icon>
                                <span>个人信息</span>
                            </el-menu-item>
                            <el-menu-item index="/person/personalFoot">
                                <el-icon>
                                    <icon-menu/>
                                </el-icon>
                                <span>我的足迹</span>
                            </el-menu-item>
                            <el-menu-item index="/shopCar">
                                <el-icon>
                                    <icon-menu/>
                                </el-icon>
                                <span>我的购物车</span>
                            </el-menu-item>
                            <el-menu-item index="/person/personalCollect">
                                <el-icon>
                                    <icon-menu/>
                                </el-icon>
                                <span>我的收藏</span>
                            </el-menu-item>
                            <el-menu-item index="/order">
                                <el-icon>
                                    <icon-menu/>
                                </el-icon>
                                <span>我的订单</span>
                            </el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col :span="1"></el-col>
                    <el-col :span="6">
                        <div style="width: 660px;height: 150px;border: 1px solid #e4eaee">
                            <div style="width: 660px;height: 90px;background: #f5f8fa;">
                                <el-row v-model="User">
                                    <el-col :span="3">
                                        <img :src="`http://127.0.0.1:8081/avatar/${avatar}`"
                                             style="border-radius: 50%;height: 60px;width: 60px;margin: 15px 0px 0px 25px">
                                    </el-col>
                                    <el-col :span="1"></el-col>
                                    <el-col :span="3"><p>{{ User.username }}</p></el-col>
                                    <el-col :span="3"></el-col>
                                    <el-col :span="6">
                                                <span>
                                                     <router-link to="/personalAddress"
                                                                  style="text-decoration-line: none;" onmouseover="function mouse(){
                                                            Event.style.color = 'red'}">
                                                        <p style="font-size: 13px;margin-top: 40px">
                                                            我的收货地址
                                                        </p>
                                                    </router-link>
                                                </span>
                                    </el-col>
                                    <el-col :span="3"></el-col>
                                </el-row>
                            </div>
                            <div style="width: 700px;height: 60px">
                                <ul>

                                    <li style="margin-left: 100px;cursor: pointer"><span @click="dfh()">待发货</span>
                                    </li>
                                    <li style="margin-left: 25px;cursor: pointer"><span @click="dsh()">待收货</span>
                                    </li>
                                    <li style="margin-left: 25px;cursor: pointer"><span @click="dpj()">待评价</span>
                                    </li>
                                    <li style="margin-left: 25px;cursor: pointer">
                                        <span @click="ypj()">已评价</span>
                                    </li>


                                </ul>
                            </div>


                        </div>
                        <div style="width: 660px;margin-top: 20px">
                            <keep-alive include="personal">
                                <router-view></router-view>
                            </keep-alive>
                            <!--                                    <router-view v-slot="{ Component }">-->
                            <!--                                        <keep-alive>-->
                            <!--                                            <component :is="Component" />-->
                            <!--                                        </keep-alive>-->
                            <!--                                    </router-view>-->
                        </div>

                    </el-col>
                    <el-col :span="1"></el-col>
                    <el-col :span="5"></el-col>
                    <el-col :span="5">
                        <div style="width: 260px;height: 260px;border: 1px solid #e4eaee">
                            <div style="width: 260px;height: 60px;background: #6ec884;border: 1px solid #e4eaee">
                                <h3 align="center">我的日历</h3>
                            </div>
                            <div style="width: 260px;height: 200px;">
                                <h3 align="center" style="font-size: 50px;margin-top: 10px;color:#6ec884 ">
                                    {{ day }}</h3>
                                <h3 align="center" style="font-size: 16px;color:#6ec884 ">{{ week }}</h3>
                                <h3 align="center" style="font-size: 16px;color:#6ec884 ">{{ year }}.{{ mouth }}</h3>
                            </div>
                        </div>
                    </el-col>
                </el-row>

            </el-main>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'

import {onMounted, ref, reactive, toRaw} from 'vue'
import {ElMessageBox, ElTable} from 'element-plus'
import goodApi from '../api/goods.js'
import axios from 'axios'
import router from '../router/index.js'
import {ElMessage} from "element-plus";

const mouth = ref()
const year = ref()
const day = ref()
const weeks = ref()
const days = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六"
]
const week = ref('')
onMounted(() => {
    getCurrenTime()
    UserMessage()
})


function getCurrenTime() {
    const now = new Date();
    year.value = now.getFullYear();
    mouth.value = now.getMonth() + 1;
    day.value = now.getDate();
    weeks.value = now.getDay();
    week.value = days[weeks.value]
}

const User = reactive({
    username: '',
})
const avatar = ref('')

const UserMessage = () => {
    axios.get('http://127.0.0.1:8080/user/queryById').then(res => {
        User.username = res.data.username
        avatar.value = res.data.avatar
    }).catch(error => {
        console.log(error)
    })
}

const ypj = () =>{
    router.push({
        path:'/order1',
        query:{
            sta: 4
        }
    })
}

const dfh = () => {
    router.push({
        path: '/order1',
        query: {
            sta: 1
        }
    })
}
const dpj = () => {
    router.push({
        path: '/order1',
        query: {
            sta: 3
        }
    })
}
const dsh = () => {
    router.push({
        path: '/order1',
        query: {
            sta: 2
        }
    })
}

</script>
